<template>
<div>
  <div>
    <el-form label-width="80px">
      <el-form-item v-if="inputVisible" label="规格:" prop="foodName">
        <el-input @input="getSpecs" style="width: 30%" v-model="specs" placeholder="规格"></el-input>
      </el-form-item>
      <el-form-item prop="foodName">
        <el-checkbox v-model="normsStatus" @change="useMoreSpecs">启用多规格<span style="color: red">(如大份，中份，小份)</span></el-checkbox>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" v-show="moreSpecsVisible">
      <el-table-column
        prop="specsName"
        label="规格"
       >
        <template slot-scope="scope">
          <el-input @input="keepSpecs" v-model="scope.row.specsName"></el-input>
        </template>
      </el-table-column>
      <el-table-column
        prop="price"
        label="价格"
        >
        <template slot-scope="scope">
          <el-input @input="keepSpecs" v-model="scope.row.price"></el-input>
        </template>
      </el-table-column>
      <el-table-column
        prop="costPrice"
        label="成本价"
        >
        <template slot-scope="scope">
          <el-input @input="keepSpecs" v-model="scope.row.costPrice"></el-input>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        >
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="deleteRow(scope.$index, tableData)"
            type="text"
            size="small">
            移除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div v-show="moreSpecsVisible" style="padding-top: 30px" align="center">
      <el-button type="success" @click="addSpecs">
        新增规格
      </el-button>
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: "food_specs",
  data(){
    return{
      specs:'份',
      normsStatus:'',
      inputVisible:true,
      moreSpecsVisible:false,
      tableData: [],
      inputDis:false,
      nullSign:0,
    }
  },

  methods:{
    initData(data){
        this.tableData = data.specsList
        if (data.normsStatus === 1){
          this.normsStatus = true
          this.inputVisible = false
          this.moreSpecsVisible = true
        }else{
			this.normsStatus = false
			this.inputVisible = false
			this.moreSpecsVisible = false
		}
    },

    //使用多规格
    useMoreSpecs(){
      this.moreSpecsVisible = this.normsStatus === true;
      if (this.normsStatus === false){
        //this.tableData = []
        let json = {
          moreSpecs:false,
          data:this.tableData
        }
        this.$emit("getSpecsList",json)
      }else {
        let json = {
          moreSpecs:true,
          data:this.tableData
        }
        this.$emit("getSpecsList",json)
      }
      this.inputVisible = this.inputVisible === false
    },

    getSpecs(){
      let json ={
        moreSpecs:false,
        specs:this.specs
      }
      this.$emit("getSpecsList",json)
    },

    //新增规格
    addSpecs(){
      if (this.normsStatus === true){
        let json = {
          id:'',
          specsName: '',
          price: 0,
          costPrice: 0,
        }
        this.tableData.push(json)
      }

    },
    keepSpecs(){
      let json ={
        moreSpecs:true,
        data:this.tableData
      }
        this.$emit("getSpecsList",json)
    },

    deleteRow(index,rows){
      rows.splice(index, 1);
    }

  },

}
</script>

<style scoped>

</style>
